<style>
@import '/pages/storylibrary/education/index.css';

.meaning-container {
    padding-bottom: 50rpx;
}

.meaning-header {
    position: relative;
    height: 300rpx;
    overflow: hidden;
    margin-bottom: 30rpx;
}

.header-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.header-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.6));
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 30rpx;
}

.header-title {
    color: #ffffff;
    font-size: 40rpx;
    font-weight: bold;
    margin-bottom: 10rpx;
}

.header-subtitle {
    color: rgba(255, 255, 255, 0.9);
    font-size: 28rpx;
}

.content-section {
    padding: 0 30rpx;
}

.section-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 20rpx;
    position: relative;
    padding-left: 20rpx;
}

.section-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 8rpx;
    height: 30rpx;
    background-color: #4CAF50;
    border-radius: 4rpx;
}

.section-content {
    font-size: 28rpx;
    color: #333;
    line-height: 1.6;
    margin-bottom: 30rpx;
}

.quote-box {
    background-color: #f5f7f9;
    border-left: 8rpx solid #4CAF50;
    padding: 20rpx;
    margin: 20rpx 0 30rpx;
    border-radius: 0 8rpx 8rpx 0;
}

.quote-text {
    font-size: 28rpx;
    color: #333;
    font-style: italic;
    line-height: 1.6;
}

.quote-author {
    font-size: 24rpx;
    color: #666;
    text-align: right;
    margin-top: 10rpx;
}

.meaning-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 30rpx;
}

.meaning-card {
    /* width: 48%; */
    background-color: #ffffff;
    border-radius: 12rpx;
    padding: 20rpx;
    margin-bottom: 20rpx;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
}

.meaning-icon {
    width: 60rpx;
    height: 60rpx;
    margin-bottom: 15rpx;
}

.meaning-title {
    font-size: 28rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 10rpx;
}

.meaning-desc {
    font-size: 24rpx;
    color: #666;
    line-height: 1.5;
}

.reflection-box {
    background-color: #f0f7f0;
    border-radius: 12rpx;
    padding: 25rpx;
    margin: 20rpx 0 30rpx;
}

.reflection-title {
    font-size: 28rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 15rpx;
}

.reflection-question {
    font-size: 26rpx;
    color: #444;
    margin-bottom: 10rpx;
    line-height: 1.5;
}

.back-button {
    position: fixed;
    top: 30rpx;
    left: 30rpx;
    z-index: 100;
    background-color: rgba(255, 255, 255, 0.8);
    width: 70rpx;
    height: 70rpx;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.back-icon {
    width: 45rpx;
    height: 40rpx;
}
</style>
<template>
    <view class="education-container meaning-container">
        <!-- 返回按钮 -->
        <view class="back-button" @click="goBack">
            <image class="back-icon" src="/static/back-icon.png"></image>
        </view>

        <!-- 头部区域 -->
        <view class="meaning-header">
            <image class="header-image" src="/assets/education/life-meaning.png"></image>
            <view class="header-overlay">
                <text class="header-title">生命意义</text>
                <text class="header-subtitle">寻找生命的意义与目的</text>
            </view>
        </view>

        <!-- 内容区域 -->
        <scroll-view scroll-y class="main-content">
            <view class="content-section">
                <view class="section-title">寻找生命的意义</view>
                <text class="section-content">
                    寻找生命意义是人类永恒的追求。从古至今，哲学家、思想家和普通人都在思考：我们为什么存在？生命的目的是什么？如何过有意义的生活？

                    生命意义不是固定不变的，而是在不同人生阶段和不同文化背景下有着不同的表现。每个人都需要通过自己的经历和思考，发现适合自己的生命意义。
                </text>

                <view class="quote-box">
                    <text class="quote-text">"生命的意义不在于它有多长，而在于你如何利用它。"</text>
                    <text class="quote-author">— 塞涅卡</text>
                </view>

                <view class="section-title">生命意义的多元视角</view>
                <view class="meaning-cards">
                    <view class="meaning-card">
                        <image class="meaning-icon" src="/static/meaning-icon1.png"></image>
                        <text class="meaning-title">创造价值</text>
                        <text class="meaning-desc">通过工作、创造和成就来实现生命的意义，为世界留下自己的贡献。</text>
                    </view>

                    <view class="meaning-card">
                        <image class="meaning-icon" src="/static/meaning-icon2.png"></image>
                        <text class="meaning-title">体验价值</text>
                        <text class="meaning-desc">通过体验美、爱和真理，感受生活的丰富多彩，从中获取意义。</text>
                    </view>

                    <view class="meaning-card">
                        <image class="meaning-icon" src="/static/meaning-icon3.png"></image>
                        <text class="meaning-title">态度价值</text>
                        <text class="meaning-desc">即使在无法改变的困境中，通过改变自己的态度来找到意义。</text>
                    </view>

                    <view class="meaning-card">
                        <image class="meaning-icon" src="/static/meaning-icon4.png"></image>
                        <text class="meaning-title">关系连接</text>
                        <text class="meaning-desc">通过与他人之间的深度连接和爱的关系，体验生命的意义。</text>
                    </view>
                </view>

                <view class="section-title">在困境中寻找意义</view>
                <text class="section-content">
                    维克多·弗兰克尔在纳粹集中营的经历中发现，即使在最极端的苦难中，人仍然可以找到生存的意义。他创立的意义疗法强调，人类最根本的动力不是追求快乐或权力，而是寻找生命的意义。

                    面对疾病、失去和死亡等人生挑战时，寻找意义变得尤为重要。通过赋予苦难以意义，我们能够超越困境，获得内心的力量和平静。
                </text>

                <view class="reflection-box">
                    <text class="reflection-title">生命意义的思考</text>
                    <br />
                    <text class="reflection-question">1. 什么是你生命中最重要的价值？</text>
                    <br />
                    <text class="reflection-question">2. 回顾过去，哪些经历让你感到生命最有意义？</text>
                    <br />
                    <text class="reflection-question">3. 如果你只剩下有限的时间，你会如何度过？</text>
                    <br />
                    <text class="reflection-question">4. 你希望为这个世界留下什么？</text>
                    <br />
                    <text class="reflection-question">5. 在面对困难时，是什么支撑着你继续前行？</text>
                </view>

                <view class="quote-box">
                    <text class="quote-text">"那些有为什么而活的人，几乎能够承受任何一种如何去活。"</text>
                    <text class="quote-author">— 尼采</text>
                </view>

                <view class="section-title">创造个人意义</view>
                <text class="section-content">
                    生命意义不是被动接受的，而是主动创造的。每个人都可以通过自己的选择、行动和态度，为生命赋予独特的意义。

                    创造个人意义的过程包括：认识自我、确立价值观、设定目标、建立联系、反思成长。这是一个持续的过程，随着人生经历的丰富和思考的深入，我们对生命意义的理解也会不断深化。

                    在临终关怀工作中，帮助人们回顾生命、整合经历、找到和平，是生命教育的重要部分。通过理解生命的有限性，我们反而能更深刻地把握当下，活出有意义的生活。
                </text>
            </view>
        </scroll-view>
    </view>
</template>

<script>
export default {
    data() {
        return {

        };
    },
    methods: {
        goBack() {
            uni.navigateBack();
        }
    }
};
</script>